import './FrontLayer.scss'
import { Tabs } from "antd"

import {
    frontLayerHomeMapping,
    frontLayerMapMapping,
    frontLayerOtherMapping
} from '../../Config/frontConfig'
import { useState } from 'react';
import { useEffect } from 'react';

const FrontLayer = ({ ModalEvent }) => {
    const [Select, setSelect] = useState([])

    const onClick = (e) => {
        setSelect(data => {
            if (data.find(v => v === e)) return [...data.filter(v => v !== e)]
            else return [...data, e]
        })
    }

    useEffect(() => {
        ModalEvent.emit({ type: 'selLayer', data: Select })
    }, [Select])

    const items = [
        {
            key: 'Home',
            label: '首页图层',
            children: (
                <div className='FrontLayerList'>
                    {frontLayerHomeMapping.map(({ label, value, img }) =>
                        <div
                            key={value}
                            className={`${Select.includes(value) ? 'active' : ''}`}
                            onClick={() => onClick(value)}
                        >
                            <img src={img} alt="" />
                            <div>{label}</div>
                        </div>
                    )}
                </div>
            )
        },
        {
            key: 'Map',
            label: '地图图层',
            children: (
                <div className='FrontLayerList'>
                    {frontLayerMapMapping.map(({ label, value, img }) =>
                        <div
                            key={value}
                            className={`${Select.includes(value) ? 'active' : ''}`}
                            onClick={() => onClick(value)}
                        >
                            <img src={img} alt="" />
                            <div>{label}</div>
                        </div>
                    )}
                </div>)
        },
        {
            key: 'Other',
            label: '其他图层',
            children: (
                <div className='FrontLayerList'>
                    {frontLayerOtherMapping.map(({ label, value, img }) =>
                        <div
                            key={value}
                            className={`${Select.includes(value) ? 'active' : ''}`}
                            onClick={() => onClick(value)}
                        >
                            <img src={img} alt="" />
                            <div>{label}</div>
                        </div>
                    )}
                </div>)
        },
    ]



    // console.log('大屏可用图层', frontLayerHomeMapping)
    return (
        <div className='FrontLayer'>
            <Tabs
                tabPosition='left'
                items={items}
            />
        </div>
    );
};

export default FrontLayer;